<template>
    <div style="height: 100%; position: relative">
        <el-drawer
            title="查看发票信息"
            :visible.sync="show_dialog"
            direction="rtl"
            size="80%"
            custom-class="demo-drawer"
            ref="drawer"
        >
            <div class="demo-drawer__content" ref="content">
                <div class="infoTitle">发票详情</div>
                <div class="booking-detail">
                    <!-- <p class="fSize12">预约状态</p> -->
                    <ul>
                        <li>
                            <span class="label">批次号: </span>
                            <span class="content">{{od.currentBatch}}</span>
                        </li>
                        <li>
                            <span class="label">当前批次订单总数: </span>
                            <span class="content">{{od.invoiceNum}}</span>
                        </li>
                        <li>
                            <span class="label">开票时间: </span>
                            <span class="content">{{od.invoiceDate}}</span>
                        </li>
                        <li>
                            <span class="label">开票状态: </span>
                            <span class="content">{{stateObj[od.state]}}</span>
                        </li>
                        <li>
                            <span class="label">运单号: </span>
                            <span class="content">{{od.markId}}</span>
                        </li>
                    </ul>
                </div>
                <div class="infoTitle">物流信息</div>
                <div class="booking-detail">
                    <el-table :data="Delivery" style="width: 100%" :height="oHeight">
                        <el-table-column prop="opeTime" label="处理时间" width="150"></el-table-column>
                        <el-table-column prop="opeTitle" label="站点信息" width="120"></el-table-column>
						 <el-table-column prop="opeRemark" label="实时信息" width="300"></el-table-column>
                    </el-table>
                </div>
            </div>
            <div class="demo-drawer__footer">
                <el-button @click="cancelForm">取 消</el-button>
                <el-button
                    type="primary"
                    @click="handleClose"
                    :loading="loading"
                >{{ loading ? "提交中 ..." : "确 定" }}</el-button>
            </div>
        </el-drawer>
    </div>
</template>
<script>
import { dateFormatter } from "@/common/js/util"
export default {
    props: ['dialog'],
    data() {
        return {
            loading: false,
            show_dialog: false,//弹窗显示
			od: '',
			stateObj:{
				0:'未开票',
				1:'全部开票',
				2:'驳回开票',
				3:'部分开票',
				4:'发票寄出',
				5:'取消开票',
				6:'开票失败'
			},
			oHeight:'500',
            Delivery: []
        }
    },
    methods: {
        show_dialog_fn(row) {
            this.show_dialog = true,
			this.od = row;
			console.log(row)
			this.getOrderDetail(row.markId)
        },
        cancelForm() {
            this.loading = false
            this.show_dialog = false
            clearTimeout(this.timer)
        },
        handleClose(done) {
			this.$refs.drawer.closeDrawer()
			this.Delivery=[];
        },
        getOrderDetail(id) {
            this.$http.get(`/admin/pointprod/index.php?act=pointInvoice&op=queryDelivery&markId=${id}`).then(res => {
				this.Delivery = res.data;
				this.resizeHeight()
            }).catch(err => {
                this._message('error', err);
            })
		},
		resizeHeight(){
			this.oHeight = this.$refs.content.offsetHeight - 166;
		}
	},
	mounted(){
		window.onresize=()=>{
			this.resizeHeight()
		}
	}
}
</script>

<style lang="scss" scoped>
.el-form {
    // width: 560px;
    padding-left: 10px;
}

.el-select /deep/.el-input {
    width: 360px;
}
.plantTable /deep/.el-input {
    width: auto;
}
form /deep/.el-input {
    width: 360px;
}

.demo-drawer__content {
    position: absolute;
    top: 0;
    bottom: 60px;
    width: 100%;
    overflow-y: auto;
}

/deep/.el-drawer__body {
    position: absolute;
    top: 77px;
    bottom: 0;
    width: 100%;
    overflow: auto;
    padding-bottom: 60px;
}

.demo-drawer__footer {
    position: absolute;
    bottom: 10px;
    left: 20px;
}

.avatar-uploader /deep/.el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader /deep/.el-upload:hover {
    border-color: #409eff;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
.infoTitle {
    width: calc(100% - 40px);
    margin: 0 auto;
    font-size: 14px;
    font-weight: 600;
    color: #5e728a;
    line-height: 40px;
    padding-left: 10px;
    background-color: #f3f5f8;
}
.booking-detail {
    padding: 0px 20px;
    .fSize12 {
        font-size: 12px;
        font-weight: 600;
        padding: 10px;
        border-bottom: 1px dashed #d7d8dc;
    }
    ul {
        display: flex;
        font-size: 14px;
        padding: 10px 0 10px 50px;
        flex-wrap: wrap;
        li {
            width: 50%;
            padding: 2px 0;
            font-size: 12px;
            .label {
                color: #888;
            }
        }
    }
}
.row_line {
    border-bottom: 1px dashed #d7d8dc;
}
.goodsInfo {
    display: flex;
    align-items: center;
}
</style>
